<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="../../js/mui.min.js"></script>
		<script src="city.data.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content">
		    <a class="mui-control-item" onclick="openlist(this.id)" style="text-align:center;" id="province">北京市
			</a>
		</div>
		 <ul id="opta" class="mui-table-view"style="width: 100%;height:auto;position:absolute;font-size:2em;text-align:center;z-index: 101;display:none;">
    <li class="mui-table-view-cell">Item 3</li>
</ul>
	</body>
	<script type="text/javascript">
		opta=document.getElementById('opta');
function openlist(htmlid){
	if(htmlid=='city' || htmlid=='province'){
//	listone(htmlid,0,htmlid,0);
		selectcity(htmlid); 
	}else{
	listone(htmlid,0,htmlid,0);	
	}
	Show_Hidden(htmlid);
}
function selectcity(htmlid){
var i=0;
var lisk='';
for( var i=0; i< cityData.length;i++){//遍历json对象的每个key/value对,p为key
//	alert(cityData[i].text);
	lisk+='<li class="mui-table-view-cell" value="'+cityData[i].text+'" onclick="listcity(\''+htmlid+'\',\''+cityData[i].text+'\',\''+i+'\',\'0\')">'+cityData[i].text+'</li>';
}
opta.innerHTML=lisk+'<li  class="mui-table-view-cell"  onclick="Show_Hidden(\'opta\');lookcity(\''+htmlid+'\',\''+i+'\',\'\',\'\')">取消</li>';

}
function lookcity(type,mod,province,city){
//	alert(type+'-->'+mod+province+','+city);
	p=0;
if(city!='' || province !=''){
	document.getElementById('province').innerHTML=province;
	document.getElementById('city').innerHTML=city;
	item(0);//获取数据
	//开启上拉功能
//		mui("#content").pullRefresh().setStopped(false);
}
}
function Show_Hidden(trid){
    if(opta.style.display=='block'){
    	opta.style.display='none';
        document.getElementsByClassName('mui-content')[0].style.display='block';
        
    }else{
        opta.style.display='block';
        document.getElementsByClassName('mui-content')[0].style.display='none';
    }
}
var num2=0;
function listcity(type,mod,childrennum,num2){
	children=cityData[childrennum].children;
//	alert(type+'-->'+mod+JSON.stringify(children[0].text));
//关闭上拉加载
		mui("#pullRefresh").pullRefresh().disablePullupToRefresh();
			//key是本地数据库的键值，
			var vals='';
			for(var i=0; i< children.length;i++){
		//	alert(result[i].id+'":"'+result[i].title);
			vals +='<li class="mui-table-view-cell" onclick="Show_Hidden(\'opta\');lookcity(\''+type+'\',\''+mod+'\',\''+cityData[childrennum].text+'\',\''+children[i].text+'\')">'+children[i].text+'</li>';
			}
		opta.innerHTML=vals+'<li type="button"  class="mui-table-view-cell" value="" onclick="Show_Hidden(\'opta\');lookcity(\''+type+'\',\'\',\'\',\'\')">取消</li>';
}
	</script>
</html>